<template>
  <div class="" :style="{height: $store.state.height + 'px'}" style="width: 100%;position: relative;">
    <div id="cesiumContainer" :style="{height: $store.state.height + 'px', width: '100%'}"></div>
  </div>
</template>

<script>
require('cesium/Source/Widgets/widgets.css');
import Cesium from 'cesium/Source/Cesium';
window.Cesium = Cesium;
import OLCesium from 'ol-cesium/src/olcs/OLCesium.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import * as olProj from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';

let tileWorldImagery = new TileLayer({
  source: new XYZ({
    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    crossOrigin: 'Anonymous',
  })
});

export default {
  name: "oc3d",
  title: "OlCesium测试",
  data () {
    return {
      map: null,
      ol3d: null
    }
  },
  mounted () {
    // var viewer = new Cesium.Viewer('cesiumContainer');
    console.log(Cesium.Viewer);
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
            url : '//10.1.3.42:6080/arcgis/rest/services/test/MapServer'
        }),
        baseLayerPicker : true
    });
    // this.map = new Map({
    //   target: "cesiumContainer",
    //   projection: 'EPSG:3857',
    //   layers: [
    //     tileWorldImagery
    //   ],
    //   view: new View({
    //     center: olProj.fromLonLat([134.364805, -26.710497]),
    //     zoom: 4,
    //     minZoom: 2,
    //   }),
    // });
    // let ol3d = new OLCesium({map: this.map});
    // ol3d.setEnabled(true);
  }
}
</script>

<style lang="less">
</style>
